<template>
	<div>
		<div
			v-infinite-scroll="loadMore"
			infinite-scroll-disabled="busy"
			infinite-scroll-distance="10"
			class="row wrap w-12/12 start-start px-md"
		>
			<HotBidItem
				v-for="(item, index) in nftList"
				:key="index"
				:nftInfo="item"
				v-show="index < showCount"
			></HotBidItem>
		</div>
		<Divider plain v-show="showCount >= nftList.length">已经到底了</Divider>
	</div>
</template>

<script>
import HotBidItem from './HotBidItem.vue';
export default {
	data() {
		return {
			nftInfo: [],
			showCount: 8,

			data: [],
			busy: false,
			count: 0,
		};
	},
	components: {
		HotBidItem,
		// infinateScroll,
	},
	props: ['nftList'],

	methods: {
		handleReachBottom() {
			if (this.showCount < this.nftList.length) {
				return new Promise((resolve) => {
					setTimeout(() => {
						this.showCount += 4;
						console.log(this.showCount);
						resolve();
					}, 2000);
				});
			}
		},

		loadMore: function() {
			if (this.showCount < this.nftList.length) {
				return new Promise((resolve) => {
					setTimeout(() => {
						this.showCount += 4;
						console.log(this.showCount);
						resolve();
					}, 2000);
				});
			}
		},
	},
};
</script>
